<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>战队</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        .modal-backdrop {
            backdrop-filter: blur(5px);
            transition: all 0.3s ease;
        }
        .modal-content {
            transform: scale(0.9);
            opacity: 0;
            transition: all 0.3s ease;
        }
        .modal-show .modal-content {
            transform: scale(1);
            opacity: 1;
        }
        .input-group {
            position: relative;
            margin-bottom: 1.5rem;
        }
        .input-group input {
            width: 100%;
            padding: 0.75rem 1rem;
            border: 1px solid #e5e7eb;
            border-radius: 0.5rem;
            font-size: 1rem;
            line-height: 1.5;
            transition: all 0.3s;
            background-color: #f9fafb;
        }
        .input-group input:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
            background-color: white;
        }
        .input-group label {
            position: absolute;
            left: 1rem;
            top: 0.75rem;
            color: #6b7280;
            transition: all 0.3s;
            pointer-events: none;
        }
        .input-group input:focus + label,
        .input-group input:not(:placeholder-shown) + label {
            top: -0.5rem;
            left: 0.75rem;
            font-size: 0.75rem;
            padding: 0 0.25rem;
            background-color: white;
            color: #3b82f6;
        }
        .btn {
            padding: 0.75rem 1.5rem;
            border-radius: 0.5rem;
            font-weight: 500;
            transition: all 0.3s;
        }
        .btn-primary {
            background-color: #3b82f6;
            color: white;
        }
        .btn-primary:hover {
            background-color: #2563eb;
        }
        .btn-secondary {
            background-color: white;
            border: 1px solid #e5e7eb;
            color: #4b5563;
        }
        .btn-secondary:hover {
            background-color: #f9fafb;
        }
        .team-card {
            transition: all 0.2s;
            cursor: pointer;
        }
        .team-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
        .team-icon {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #e5e7eb;
            background-color: #000000;
            padding: 4px;
        }
    </style>
</head>
<body class="bg-gray-50">
    <div class="max-w-md mx-auto h-screen flex flex-col">
        <!-- 顶部导航 -->
        <header class="bg-white shadow-sm">
            <div class="px-4 py-6">
                <div class="flex justify-between items-center">
                    <h1 class="text-xl font-semibold">战队</h1>
                    <button onclick="showAddTeamModal()" class="bg-blue-500 text-white rounded-full w-10 h-10 flex items-center justify-center shadow-lg hover:bg-blue-600 transition">
                        <i class="fas fa-plus"></i>
                    </button>
                </div>
                <!-- 搜索框 -->
                <div class="mt-4">
                    <div class="relative">
                        <input type="text" placeholder="搜索战队" 
                            class="w-full px-4 py-2 bg-gray-100 rounded-lg pl-10 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition"
                            onkeyup="filterTeams(this.value)">
                        <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
                    </div>
                </div>
            </div>
        </header>

        <!-- 战队列表 -->
        <div class="flex-1 overflow-y-auto">
            <div id="teamList" class="p-4 space-y-4">
                <!-- 战队卡片将通过JavaScript动态添加 -->
            </div>
        </div>

        <!-- 底部导航 -->
        <nav class="bg-white border-t border-gray-200">
            <div class="flex justify-around py-3">
                <a href="home.html" class="flex flex-col items-center text-gray-400">
                    <i class="fas fa-list-ul"></i>
                    <span class="text-xs mt-1">记录</span>
                </a>
                <a href="zhandui.html" class="flex flex-col items-center text-blue-500">
                    <i class="fas fa-users"></i>
                    <span class="text-xs mt-1">战队</span>
                </a>
                <a href="stats.html" class="flex flex-col items-center text-gray-400">
                    <i class="fas fa-chart-bar"></i>
                    <span class="text-xs mt-1">统计</span>
                </a>
            </div>
        </nav>

        <!-- 添加战队模态框 -->
        <div id="addTeamModal" class="fixed inset-0 bg-black bg-opacity-40 modal-backdrop hidden items-center justify-center z-50">
            <div class="modal-content bg-white rounded-xl p-6 w-11/12 max-w-md shadow-2xl">
                <div class="flex justify-between items-center mb-6">
                    <h2 class="text-xl font-semibold text-gray-800">添加战队</h2>
                    <button onclick="hideAddTeamModal()" class="text-gray-400 hover:text-gray-600 transition">
                        <i class="fas fa-times text-xl"></i>
                    </button>
                </div>
                <form id="addTeamForm" class="space-y-4">
                    <div class="input-group">
                        <input type="text" name="name" id="teamName" placeholder=" " required>
                        <label for="teamName">战队名称</label>
                    </div>
                    <div class="input-group">
                        <input type="text" name="league" id="teamLeague" placeholder=" " required>
                        <label for="teamLeague">所属联赛</label>
                    </div>
                    <div class="input-group">
                        <input type="text" name="game" id="teamGame" placeholder=" " required>
                        <label for="teamGame">所属游戏</label>
                    </div>
                    <div class="flex justify-end space-x-3 mt-8">
                        <button type="button" onclick="hideAddTeamModal()" class="btn btn-secondary">取消</button>
                        <button type="submit" class="btn btn-primary">保存</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        // API基础URL
        const API_BASE_URL = window.location.origin + '/api';
        let teams = [];

        // 获取并显示战队列表
        async function loadTeams() {
            try {
                const response = await fetch(`${API_BASE_URL}/teams`);
                teams = await response.json();
                renderTeams(teams);
            } catch (error) {
                console.error('Error loading teams:', error);
            }
        }

        // 渲染战队列表
        function renderTeams(teamsToRender) {
            const teamList = document.getElementById('teamList');
            
            // 按联赛分组
            const leagueGroups = {};
            teamsToRender.forEach(team => {
                if (!leagueGroups[team.league]) {
                    leagueGroups[team.league] = [];
                }
                leagueGroups[team.league].push(team);
            });
            
            // 转换为前端展示格式
            const groupedTeams = Object.keys(leagueGroups).map(league => ({
                league: league,
                teams: leagueGroups[league]
            }));
            
            // 渲染HTML
            teamList.innerHTML = groupedTeams.map(leagueGroup => `
                <div class="league-group mb-6">
                    <div class="league-title bg-gray-100 rounded-lg px-4 py-2 mb-3">
                        <h3 class="font-bold text-gray-700">${leagueGroup.league}</h3>
                    </div>
                    <div class="space-y-3">
                        ${leagueGroup.teams.map(team => `
                            <div class="team-card bg-white rounded-xl p-4 shadow-sm hover:shadow-md transition" onclick="editTeam(${team.id})">
                                <div class="flex items-center">
                                    <img src="${team.icon}" alt="${team.name}" class="team-icon" onerror="this.src='/static/team_icons/default_team.png'">
                                    <div class="ml-4 flex-1">
                                        <div class="font-medium">${team.name}</div>
                                        <div class="text-sm text-gray-500">
                                            <span>${team.game}</span>
                                        </div>
                                        <div class="text-sm text-gray-500 mt-1">
                                            <span class="${team.win_rate >= 50 ? 'text-green-500' : 'text-red-500'}">
                                                胜率 ${team.win_rate}%
                                            </span>
                                            <span class="mx-2">|</span>
                                            <span>${team.wins || 0}胜/${team.total_matches || 0}场</span>
                                        </div>
                                    </div>
                                    <i class="fas fa-chevron-right text-gray-400"></i>
                                </div>
                            </div>
                        `).join('')}
                    </div>
                </div>
            `).join('');
        }

        // 显示添加战队模态框
        function showAddTeamModal() {
            const modal = document.getElementById('addTeamModal');
            modal.classList.remove('hidden');
            modal.classList.add('flex');
            setTimeout(() => {
                modal.classList.add('modal-show');
            }, 10);
        }

        // 隐藏添加战队模态框
        function hideAddTeamModal() {
            const modal = document.getElementById('addTeamModal');
            modal.classList.remove('modal-show');
            setTimeout(() => {
                modal.classList.remove('flex');
                modal.classList.add('hidden');
            }, 300);
        }

        // 处理表单提交
        document.getElementById('addTeamForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            const formData = new FormData(e.target);
            const data = Object.fromEntries(formData.entries());
            
            try {
                const response = await fetch(`${API_BASE_URL}/teams`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(data)
                });
                
                if (response.ok) {
                    hideAddTeamModal();
                    loadTeams();
                    e.target.reset();
                }
            } catch (error) {
                console.error('Error adding team:', error);
            }
        });

        // 搜索战队
        function filterTeams(searchTerm) {
            searchTerm = searchTerm.toLowerCase();
            const filteredTeams = teams.filter(team => 
                team.name.toLowerCase().includes(searchTerm) ||
                team.league.toLowerCase().includes(searchTerm) ||
                team.game.toLowerCase().includes(searchTerm)
            );
            renderTeams(filteredTeams);
        }
        
        // 编辑战队
        function editTeam(teamId) {
            window.location.href = `team_edit.html?id=${teamId}`;
        }

        // 初始加载
        loadTeams();
    </script>
</body>
</html> 